<template>
    <div class="home-page">
        <site-header @result="resultAction"></site-header>
        <site-menus ref="menus"></site-menus>
        <div class="content">
            <div class="viewpoint">
                <Row>
                    <Col span="1">
                        <div class="today">今日<br/>视点</div>
                    </Col>
                    <Col span="23">
                        <div class="zljfont">赵乐际在辽宁调研时强调 坚守初心使命 认真履职尽责 推动新时代纪检监察工作高质量发展</div>
                    </Col>
                </Row>
            </div>
            <Row class="swiper" :gutter="25">
                <Col span="12">
                    <div><site-img></site-img></div>
                </Col>
                <Col span="12">
                    <div>
                        <site-content-list :isShow="true" :option="option1" :list="list1" @result="homePageJump"></site-content-list>
                    </div>
                </Col>
            </Row>
            <div class="banner-one"><img src="../../../../assets/images/bd-zhengfeng.png" class="banner-one-img"/></div>
            <Row class="swiper" :gutter="40">
                <Col span="12">
                    <div>
                        <site-content-list :option="option2" :list="list2" @result="homePageJump"></site-content-list>
                    </div>
                </Col>
                <Col span="12">
                    <div>
                        <site-content-list :option="option3" :list="list3" @result="homePageJump"></site-content-list>
                    </div>
                </Col>
            </Row>
            <Row class="swiper" :gutter="40">
                <Col span="12">
                    <div>
                        <site-content-list :option="option4" :list="list4" @result="homePageJump"></site-content-list>
                    </div>
                </Col>
                <Col span="12">
                    <div>
                        <site-compoments :option="option5" @result="jumpPage"></site-compoments>
                    </div>
                </Col>
            </Row>
            <div class="banner-one"><img src="../../../../assets/images/bd-chixu.png" class="banner-one-img"/></div>
            <div class="foot">
                <site-foot></site-foot>
            </div>
            <div class="line"></div>
            <div class="end">
                <div>版权所有：沈北新区纪委监委<span class="end-font">辽ICP备17021530号-1</span><span class="end-font">您是本站第126844位访客</span></div>
                <div>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;办：沈北新区纪委监委<span class="end-font"><img src="../../../../assets/images/wj.png" height="20" width="20"/>   辽宁网安备 21010202000107号</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import SiteHeader from './compoments/site-header/index'
import SiteMenus from './compoments/site-menus/index'
import SiteImg from './compoments/site-img/index'
import SiteContentList from './compoments/site-content-list/index'
import SiteCompoments from './compoments/site-complaint/index'
import SiteFoot from './compoments/site-foot/index'
import { getArticleList } from '@/api/site'

export default {
  components: { SiteFoot, SiteCompoments, SiteContentList, SiteImg, SiteMenus, SiteHeader },
  data () {
    return {
      option1: {
        title: '工作动态',
        dsc: '沈北新区召开正风肃纪监督大数据监管平台建设推进...',
        little: '今日，为落实沈阳市纪委关于加强区县职能部门监管平台和公示公开平台建设相关精神，' +
              '进一步提升沈北新区正风肃纪监督大数据平台功能，' +
              '开展好沈北新区“残疾人双补”小专项治理对比分析模块',
        id: '1'
      },
      option2: { title: '政策法规', id: '2' },
      option3: { title: '审查调查', id: '3' },
      option4: { title: '工作信息', id: '4' },
      option5: { title: '监督投诉', id: '5' },
      list1: [],
      list2: [],
      list3: [],
      list4: []
    }
  },
  methods: {
    getList () {
      getArticleList().then(ret => {
        this.list1 = ret.data.data.list1
        this.list2 = ret.data.data.list2
        this.list3 = ret.data.data.list3
        this.list4 = ret.data.data.list4
      })
    },
    resultAction (data) {
      console.log(data)
    },
    jumpPage (data) {
      this.$router.push({
        path: '/complaints-report',
        query: { name: data }
      })
    },
    homePageJump (id) {
      if (id === '1') {
        this.$router.push({
          name: 'AllArticles',
          params: { id: id }
        })
      } else if (id === '2') {
        this.$router.push({
          name: 'Policy',
          params: { id: id }
        })
      } else if (id === '3') {
        this.$router.push({
          name: 'Examination',
          params: { id: id }
        })
      } else if (id === '4') {
        this.$router.push({
          name: 'AllArticles',
          params: { id: '3' }
        })
      } else if (id === '5') {
        this.$router.push({
          name: 'ComplaintsReport',
          params: { id: id }
        })
      }
    }
  },
  mounted () {
    this.getList()
    if (this.$route.query.index !== undefined) {
      this.$refs.menus.changeColor = this.$route.query.index
    }
  }
}
</script>

<style scoped lang="less">
    .home-page{
        height: 100%;
        overflow: scroll;
    }
    .today {
        height: 60px;
        width: 60px;
        background-color: #0166b6;
        color: white;
        font-size: 18px;
        border: 2px solid;
        border-radius: 10px;
        text-align: center;
    }

    .zljfont {
        font-size: 24px;
        color: #0166b6;
        font-weight: bolder;
        height: 60px;
        line-height: 60px;
        margin-left: 20px;
        letter-spacing: 4px;
    }

    .content {
        width: 94%;
        margin-left: 3%;
    }

    .viewpoint {
        margin-top: 20px;
    }
    .banner-one{
        margin-top: 20px;
        &-img{
            width: 100%;
        }
    }
    .swiper{
        margin-top: 20px;
    }
    .foot{
        margin-top: 20px;
    }
    .line{
        margin-top: 50px;
        height: 10px;
        background-color: #0166b6;
    }
    .end{
        line-height: 40px;
        margin-top: 50px;
        font-size: 16px;
        margin-left: 380px;
        height: 180px;
        color: black;
        &-font{
            margin-left: 40px;
        }
    }
</style>
